chore(action-button): implement accessibility features by cdransf · Pull Request #6348 · adobe/spectrum-web-components

cdransf · 2026-05-28T18:30:37Z

Description

Implements Phases 2–4 of the 1st-gen → 2nd-gen swc-action-button migration:

Phase 2 (setup): Directory scaffold, file stubs, and package exports for the new swc-action-button component in both 2nd-gen/packages/core (types) and 2nd-gen/packages/swc (component, stories, tests).
Phase 3 (API): Full TypeScript implementation of ActionButton extending ButtonBase, including the xs–xl size scale, quiet, static-color, and the no-default-attribute size behavior via a _size=null sentinel.
Phase 4 (accessibility): ARIA passthrough for aria-haspopup / aria-expanded (forwarded to the inner <button>, then stripped from the host), a pending-icon element for Phase 5 CSS targeting, and aligned JSDoc across all public members.

Also adds @deprecated JSDoc and window.__swc.warn() runtime warnings to the 1st-gen sp-action-button for emphasized, holdAffordance, selected, and toggles — signaling the migration path to consumers.

Motivation and context

swc-action-button is a high-frequency component used in toolbars, action groups, and icon-first chrome. The 2nd-gen version removes toggle semantics (toggles, selected, aria-pressed), the link API (href), and the consumer-controlled role override — all of which were identified in the migration analysis as footguns or anti-patterns. Toggle / selection UX moves to the forthcoming swc-toggle-button / swc-toggle-button-group.

Related issue(s)

SWC-2044

Screenshots (if appropriate)

N/A — no visual output yet (CSS is a stub; Phase 5 adds styling).

Author's checklist

I have read the CONTRIBUTING and PULL_REQUESTS documents.
I have reviewed the Accessibility Practices for this feature, see: Aria Practices
I have added automated tests to cover my changes.
I have included a well-written changeset if my change needs to be published.
I have included updated documentation if my change required it.

Note on tests: Phase 6 adds play-function assertions and ARIA snapshot tests. The test files created here (action-button.test.ts, action-button.a11y.spec.ts) are stubs intentionally left empty until the styling phase is complete and there is a renderable component to assert against.

Reviewer's checklist

Includes a Github Issue with appropriate flag or Jira ticket number without a link
Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
Automated tests cover all use cases and follow best practices for writing
Validated on all supported browsers
All VRTs are approved before the author can update Golden Hash

Manual review test cases

1st-gen deprecation warnings fire in dev mode
1. Open any 1st-gen Storybook story for sp-action-button
2. Open the browser console
3. Set emphasized, holdAffordance, selected, or toggles on the element
4. Expect: a window.__swc.warn() deprecation warning appears for each
2nd-gen size attribute not reflected by default
1. Open the 2nd-gen Storybook Playground for swc-action-button
2. Inspect the host element in DevTools
3. Expect: no size attribute on the host until one is explicitly set; button.size JS property returns 'm'
ARIA passthrough: aria-haspopup / aria-expanded forwarded and stripped
1. In a 2nd-gen Storybook story, set aria-haspopup="true" and aria-expanded="false" on a <swc-action-button>
2. Inspect the host element in DevTools
3. Expect: host carries neither aria-haspopup nor aria-expanded
4. Inspect shadowRoot.querySelector('button') in the console
5. Expect: the inner <button> carries both aria-haspopup="true" and aria-expanded="false"

Device review

Did it pass in Desktop?
Did it pass in (emulated) Mobile?
Did it pass in (emulated) iPad?

Accessibility testing checklist

Required: Complete each applicable item and document your testing steps.

Keyboard (required — document steps below)
1. Open the 2nd-gen Storybook Playground for swc-action-button
2. Tab to the component
3. Expect: focus ring visible on the inner <button>, not the host; shadowRoot.activeElement returns the inner <button>
4. Press Enter and Space
5. Expect: click event fires and bubbles to the host
6. Set pending attribute; tab back to the button
7. Expect: button is still in tab order; Enter / Space do not fire click
8. Set disabled attribute; tab through the page
9. Expect: button is skipped entirely
Screen reader (required — document steps below)
1. Open the 2nd-gen Storybook Playground for swc-action-button with VoiceOver (macOS) or NVDA (Windows)
2. Tab to the default <swc-action-button>Edit</swc-action-button>
3. Expect: announces "Edit, button"
4. Tab to an icon-only button with accessible-label="Format"
5. Expect: announces "Format, button"; host element is not announced separately
6. Set aria-haspopup="true" and aria-expanded="false" on the button
7. Expect: announces "Edit, button, has popup" (or platform equivalent)
8. Set pending attribute
9. Expect: announces something like "Edit, busy, button" (aria-disabled state)

changeset-bot · 2026-05-28T18:30:47Z

⚠️ No Changeset found

Latest commit: 0952e48

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2026-05-28T20:33:36Z

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

When a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:

Deployed to Azure Blob Storage: pr-6348

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

caseyisonit · 2026-06-02T18:14:13Z

+   * `hold-affordance` attribute and `longpress` event will be removed in a
+   * future release.
+   */
  @property({ type: Boolean, reflect: true, attribute: 'hold-affordance' })


this is not deprecated technically. its just not included in scope of MVP but should be addressed sooner than later.

For all deprecation notices: Also we might want to have a chat in a sync about the deprecation language because these are a bit confusing to me since there wont be a future release its removed and we are referencing gen2 components that dont exist yet

Right on! I updated it but can revise as needed. ✨

caseyisonit · 2026-06-02T22:05:18Z

+      const classValidSizes = (
+        this.constructor as unknown as SizedElementConstructor
+      ).VALID_SIZES;


can you share why this is needed? validSizes is passed in as an arg and this is disconnecting it from usage.

Ah yeah, it's more or less because ButtonBase provides BUTTON_VALID_SIZES which doesn't have xs, preventing that size from being set. If we don't need xs we could get rid of this. ✨

rise-erpelding

The base branch needs to be changed from main to the feature branch.

Otherwise, though, this looks pretty good - are a11y tests going to be implemented in the testing phase?

cdransf · 2026-06-04T20:08:46Z

The base branch needs to be changed from main to the feature branch.

Otherwise, though, this looks pretty good - are a11y tests going to be implemented in the testing phase?

Doh! Fixed that. I'll fit the a11y tests in with testing — that'll have these changes in it and we can consolidate everything in the upstream testing branch. ✨

rise-erpelding

This looks great!

cdransf requested a review from a team as a code owner May 28, 2026 18:30

cdransf self-assigned this May 28, 2026

cdransf added Component:Action button Spectrum 2 Issues related to Spectrum 2 Status:WIP PR is a work in progress or draft labels May 28, 2026

cdransf mentioned this pull request May 28, 2026

feat(action-button): S2 migration #6340

Draft

13 tasks

cdransf force-pushed the cdransf/s2-action-button-migration-a11y branch 2 times, most recently from 1df39ae to 2d0ee29 Compare May 29, 2026 15:36

cdransf requested review from 5t3ph, caseyisonit, miwha-adobe and rise-erpelding May 29, 2026 16:06

cdransf added Status:Ready for review PR ready for review or re-review. and removed Status:WIP PR is a work in progress or draft labels May 29, 2026

cdransf force-pushed the cdransf/s2-action-button-migration-a11y branch 4 times, most recently from 5e65e8d to 20eab7c Compare June 2, 2026 16:23

caseyisonit reviewed Jun 2, 2026

View reviewed changes

cdransf requested a review from caseyisonit June 2, 2026 19:44

caseyisonit reviewed Jun 2, 2026

View reviewed changes

Comment thread 2nd-gen/packages/swc/components/action-button/ActionButton.ts Outdated

cdransf requested a review from caseyisonit June 2, 2026 23:29

rise-erpelding self-assigned this Jun 2, 2026

cdransf force-pushed the cdransf/s2-action-button-migration-a11y branch from 04da994 to 75049a7 Compare June 3, 2026 15:29

rise-erpelding reviewed Jun 4, 2026

View reviewed changes

Comment thread CONTRIBUTOR-DOCS/03_project-planning/03_components/action-button/migration-plan.md Outdated

cdransf requested a review from rise-erpelding June 4, 2026 15:23

cdransf changed the base branch from main to cdransf/s2-action-button-migration June 4, 2026 20:07

cdransf force-pushed the cdransf/s2-action-button-migration branch from b028dc5 to bfb1116 Compare June 4, 2026 20:12

cdransf force-pushed the cdransf/s2-action-button-migration-a11y branch from 5a8c394 to b6205f6 Compare June 4, 2026 20:12

cdransf force-pushed the cdransf/s2-action-button-migration branch from bfb1116 to cd83f2c Compare June 5, 2026 15:47

cdransf added 4 commits June 5, 2026 08:48

chore(action-button): implement accessibility features

e8e2c32

chore(action-button): address feedback

aee802c

chore(action-button): address feedback

5a113b5

chore(action-button): address feedback

0952e48

cdransf force-pushed the cdransf/s2-action-button-migration-a11y branch from b6205f6 to 0952e48 Compare June 5, 2026 15:48

rise-erpelding approved these changes Jun 5, 2026

View reviewed changes

cdransf requested a review from nikkimk June 5, 2026 19:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

chore(action-button): implement accessibility features#6348

chore(action-button): implement accessibility features#6348
cdransf wants to merge 4 commits into
cdransf/s2-action-button-migrationfrom
cdransf/s2-action-button-migration-a11y

cdransf commented May 28, 2026

Uh oh!

changeset-bot Bot commented May 28, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 28, 2026 •

edited

Loading

Uh oh!

caseyisonit Jun 2, 2026

Uh oh!

cdransf Jun 2, 2026

Uh oh!

caseyisonit Jun 2, 2026 •

edited

Loading

Uh oh!

cdransf Jun 2, 2026

Uh oh!

Uh oh!

rise-erpelding left a comment

Uh oh!

Uh oh!

cdransf commented Jun 4, 2026

Uh oh!

rise-erpelding left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

cdransf commented May 28, 2026

Description

Motivation and context

Related issue(s)

Screenshots (if appropriate)

Author's checklist

Reviewer's checklist

Manual review test cases

Device review

Accessibility testing checklist

Uh oh!

changeset-bot Bot commented May 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions Bot commented May 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch Preview Links

🔍 First Generation Visual Regression Test Results

Uh oh!

caseyisonit Jun 2, 2026

Choose a reason for hiding this comment

Uh oh!

cdransf Jun 2, 2026

Choose a reason for hiding this comment

Uh oh!

caseyisonit Jun 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

cdransf Jun 2, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cdransf commented Jun 4, 2026

Uh oh!

rise-erpelding left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot Bot commented May 28, 2026 •

edited

Loading

github-actions Bot commented May 28, 2026 •

edited

Loading

caseyisonit Jun 2, 2026 •

edited

Loading